<template>
    <view class="list-item dispaly-just-between" v-for="(item, index) in props.data" :key="item.id"
        @click="navTo(`/subPackage/doubleSelectionMeeting/unitDetail?id=${item.id}&name=${item.company_name}&logo=${item.company_logo}&areas=${item.areas}&is_care=${item.is_care}`)">
        <view class="left dispaly-center">
            <view class="cover">
                <image :src="item.company_logo" />
            </view>
            <view>
                <view class="title">{{ item.company_name }}</view>
                <view class="tip dispaly-center">
                    <view class="tip-item" v-for="desc in item.company_label.split(',')" :key="desc">{{ desc }}</view>
                </view>
            </view>
        </view>
        <view @click.stop="care(item.id, index)" v-if="item.is_care == 0">
            <tn-icon name="add" color="#000" size="40" />
        </view>
        <view @click.stop="cancenCare(item.id, index)" v-else>
            <tn-icon name="reduce" color="#e97230" size="40" />
        </view>

    </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';
import { ref, reactive } from 'vue';
import type { CompanyObjectType } from '@/types/responseData'
import type { RequestAddCareType } from '@/types/requstParm'
import { postAddCare, postCancelCare } from '@/utils/util'


// 添加关注
const formData = reactive<RequestAddCareType>({
    user_id: 2,
    relation_id: '',
    type: 2
})

// 关注
const care = async (id: number, index: number) => {
    formData.relation_id = id
    const res = await postAddCare(formData)
    if (res == 'ok') {
        props.data[index].is_care = 1
    }
}

// 取消关注
const cancenCare = async (id: number, index: number) => {
    const res = await postCancelCare(id, 2)
    if (res == 'ok') {
        props.data[index].is_care = 0
    }
}


const props = defineProps<{
    data?: CompanyObjectType[] | any
}>()
</script>

<style lang="scss" scoped>
.list-item {
    margin-bottom: 20rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 32rpx;

    .left {
        .title {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 26rpx;
            color: #000000;
        }

        .cover {
            margin-right: 14rpx;

            image {
                width: 81rpx;
                height: 81rpx;
                border-radius: 10rpx;
            }
        }
    }

    .tip {
        margin: 14rpx 0;

        .tip-item:last-child {
            border-right: none;
        }

        .tip-item:first-child {
            padding-left: 0;
        }

        .tip-item {
            padding-right: 21rpx;
            padding-left: 21rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #7E7E7E;
            border-right: 1rpx solid #c1c1c1;
        }
    }

}
</style>